<template>
  <div class="fake-scroll" style="width:100;height:100%;overflow:auto;" ref="fakeGapWrap">
    <div v-loading="loading" class="padding grid-content">
      <el-form inline>
        <el-form-item>
          <year-month-picker v-model="time"></year-month-picker>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="clickSearch">
            查询
          </el-button>
        </el-form-item>
      </el-form>
      <grid-item-one
        title="能源消费情况分析"
        :data="gridItemOneData"
      ></grid-item-one>
      <grid-item-two
        v-if="gridItemTwoData"
        title="能源消费总量趋势"
        :data="gridItemTwoData"
      ></grid-item-two>
      <grid-item-three
        v-if="gridItemThreeData"
        title="能源消费结构及占比"
        :data="gridItemThreeData"
      ></grid-item-three>
      <template v-if="energyType">
        <focus-energy
          ref="focusEnergy"
          v-for="item in energyType"
          :key="item.energyType"
          :title="`${item.name}数据分析`"
          :time-type="timeType"
          :time="time"
          :type="item.energyType"
          :typeName="item.name"
          :unit="item.unit"
          :show-rank="!isEp"
          :enterprise-id="enterpriseId"
        ></focus-energy>
      </template>
    </div>
    <el-backtop target=".fake-scroll"></el-backtop>
  </div>
</template>

<script>
import GridItemOne from './grid-item-one';
import GridItemTwo from './grid-item-two';
import GridItemThree from './grid-item-three';
import FocusEnergy from '@/views/data-presentation-overview/focus-energy';

import YearMonthPicker, {
  getTimeTypeFromTime
} from '@/components/year-month-picker';

import MixinGridItemOne from './mixin-grid-item-one';
import MixinGridItemTwo from './mixin-grid-item-two';
import MixinGridItemThree from './mixin-grid-item-three';

import mixinFakeGap from '@/mixins/mixin-fake-gap';

export default {
  name: 'data-presentation-overview',
  mixins: [MixinGridItemOne, MixinGridItemTwo, MixinGridItemThree, mixinFakeGap],
  components: {
    GridItemOne,
    GridItemTwo,
    GridItemThree,
    FocusEnergy,
    YearMonthPicker
  },
  props: {
    // 企业端”能源总览“菜单复用此页面
    isEp: {
      type: Boolean,
      default: false
    },
    enterpriseId: [String, Number]
  },
  data() {
    return {
      loading: false,
      time: ''
    };
  },
  computed: {
    energyType() {
      return this.$store.state.energyType;
    },
    timeType() {
      return getTimeTypeFromTime(this.time);
    }
  },
  updated () {
    const wrap = this.$refs.fakeGapWrap;
    if (wrap) {
      const els = Array.from(wrap.querySelectorAll('.content-block'));
      els.forEach(el => {
        this.fixFakeGap('marginTop', el);
      })
    }
  },
  mounted() {
    this.getAllData();
    this.$store.dispatch('getEnergyType').then(() => {
      this.getFocusEnergyData();
    });
  },
  methods: {
    getParams() {
      return {
        time: this.time,
        timeType: this.timeType,
        enterpriseId: this.enterpriseId,
      };
    },
    clickSearch() {
      this.getAllData();
      this.getFocusEnergyData();
    },
    async getFocusEnergyData () {
      const ts = this.$refs.focusEnergy;
      if (ts) {
        ts.forEach(t => {
          t && t.getData();
        });
      }
    },
    async getAllData() {
      this.loading = true;
      try {
        await this.getGridItemOneData();
        await this.getGridItemTwoData();
        await this.getGridItemThreeData();
      } finally {
        this.loading = false;
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@import '@/assets/style/variable.scss';

.el-backtop {
  z-index: 2100;
}
.grid-content {
  display: flex;
  flex-direction: column;
  gap: $gutter;
}

::v-deep .content-block {
  background: white;
  border-radius: 4px;
  flex: 1;
  overflow: auto;
  box-sizing: border-box;

  .info-head {
    padding: 20px $gutter 10px $gutter;
    font-size: 16px;
  }

  .info-content {
    .width-100 {
      width: 100%;
    }
    .flex {
      gap: $gutter;
    }
    .lines-block,
    .pie-block {
      background: white;
    }
  }

  &.block-half-1 {
    flex: 60%;
  }

  &.block-half-2 {
    flex: 40%;
  }
}
.el-form-item {
  margin-bottom: 0px;
}
</style>
